import * as React from 'react';
import { InputNumber, Col, Input } from 'antd';
interface Props extends React.Props<any> {
  label?: string;
  value?: number;
  error?: string;
  col?: number;
  max?: number;
  min?: number;
  disabled?: boolean;
  required?: boolean;
  modelKey: string;
  placeholder?: string;
  onChange: (value: number | string | undefined, modelKey: string) => void;
  formatter?: (value: number | string) => string;
}
export class SInputNumber extends React.PureComponent<Props, any> {
   static defaultProps = {
    col: 24,
    disabled: false,
    required: false
  }
  render() {
    const { label,
      col,
      disabled,
      required,
      error,
      modelKey,
      value,
      placeholder,
      min,
      max,
      formatter
    } = this.props;
    return (
      <div className='input-number s-input smart-form'>
        <Col span={col}>
          {
            label ?
            <label className='label'>
              <span>{label}</span>
              {required ? <i className='required'>*</i> : null}
            </label> : null
          }
          <div className={error ? 'form-error' : ''}>
            <InputNumber
              style={{width: '100%'}}
              disabled={disabled}
              value={value}
              min={min}
              max={max}
              placeholder={placeholder}
              onChange={e => this.props.onChange!(e, modelKey)}
              formatter={formatter}
            />
          </div>
          <em className='note-error'>{error}</em>
        </Col>
      </div>
    )
  }
}